require(['./config'],()=>{
	require(['swiper','template',"request",'header','footer','zoom'],(Swiper,template,req,header)=>{
		class Detail{
			constructor() {
				this.getProdId()			    
			}
			// 获取id
			getProdId(){
				const str = window.location.search.split('=')[1]
				this.getData(str)
			}
			// 发送请求
			getData(prodId){
				req.getDetailData(prodId).then(res => {
					if(res.code === 200){
						// 渲染页面
						console.log(res)
						const {detail} = res.data
						this.renderHtml(detail)
						this.featureData(detail)
					}
				})
			}
			// 获取第二部分的数据
			renderHtml(res){
				// descContentList 商品图
				const {id,photo,price,title,introduction,originPrice} = res
				$('.details-part-2').html(template('prodDetailTemplate',{id,photo,price,title,introduction,originPrice}))
				
				let count = $('.quantity-count').val()-0
				$('.btn-add')[0].onclick = function(){					
					const num1 = ++count;
					$('.quantity-count').val(num1)
					
				}
				$('.btn-sub')[0].onclick=function(){
					if(count <= 1){
						$('.quantity-count').val('1')
					}else{
						const num2 = --count;
						$('.quantity-count').val(num2)
					}
				}
				
				this.initZoom()
				this.Zoom()
				this.addToCart({id,price,title,photo,originPrice})
				this.hover()
				this.addShopping()
			}
			// 获取features数据
			featureData(prodList){
				console.log(prodList)
				const {descContentList} = prodList
				$('.feature-body').html(template('featuresTemplate',{descContentList}))
			}
			initZoom(){
				// console.dir($)
				$('.zoom-image').elevateZoom({
					gallery:'zoomlist'
				})
			}
			addToCart(prodInfo){
				$('.add-car').click(function(){
					const {id,price,title,photo,originPrice} = prodInfo
					let prodList = localStorage.getItem('prodList')
					if(prodList){
						prodList = JSON.parse(prodList)
						const flag = prodList.some(item => {
							return item.id === id
						})
						if(flag){
							prodList.forEach(item => {
								item.id === id?item.count++:''
							})
						}else{
							prodList.push({
								id,
								imgSrc:photo[0].url,
								title,
								price,
								count:$('.quantity-count').val()-0,
								des:$('.des').text(),
								originPrice,
								isChecked:true
							})
						}
						localStorage.setItem('prodList',JSON.stringify(prodList))
					}else{
						const arr = [{id,imgSrc:photo[0].url,title,price,count:$('.quantity-count').val()-0,des:$('.des').text(),originPrice,isChecked:true}]
						// console.log(arr)
						localStorage.setItem('prodList',JSON.stringify(arr))
					}
					header.allCount()
					
					$('.tankuang').fadeIn(500,()=>{
						setTimeout(()=>{
							$('.tankuang').fadeOut(500)
						},500)
					})
				})
			}
			hover(){
				$(window).scroll(() => {
					if ($('html').scrollTop() >= 780) {
						$('.ui-stickynav').fadeIn(500)
					} else {
						$('.ui-stickynav').fadeOut(500)
					}
				})
				
				// 下滑
				$('.ui-stickynav .part-1>ul>li').click(function(){
					$(this).attr('class','active-underline').siblings().attr('class','');
				})
				$('.features').click(function(){
					$('#features').css('padding-top','124px').siblings('.maodian').css('padding-top','48px')
				})
				$('.specs').click(function(){
					$('#specs').css('padding-top','124px').siblings('.maodian').css('padding-top','48px')
				})
				$('.questions').click(function(){
					$('#questions').css('padding-top','124px').siblings('.maodian').css('padding-top','48px')
				})
				$('.comments').click(function(){
					$('#comments').css('padding-top','124px').siblings('.maodian').css('padding-top','48px')
				})
				
				// 常见问题
				$('.panel-heading').click(function() {
					$(this).siblings().slideToggle(500, 'linear', function() {})
				})
			}
			Zoom(){
				// 详情图
				$('.product-option>.option>dd>ul>li').hover(function(){
					$('.product-option>.option>dt>.des').css('display','block')
				}, function() {
					$('.product-option>.option>dt>.des').css('display','none')
				})
			}
			addShopping(){
				$('.btn-price').click(function(){
					$(location).attr('href','../html/shopping.html');
				})
			}
			
		}
		return new Detail()
	})
})

